<!-- 某类图片的集合 -->
<template>
  <div>
    <div class="allcheck">
      <el-checkbox
        v-show="checkedImgs.length > 0"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        fill=""
        @change="handleCheckAllChange"
        >全选
      </el-checkbox>
    </div>
    <el-checkbox-group v-model="checkedImgs" @change="handleCheckedImgsChange">
      <div class="type-imgs">
        <div class="images" v-for="(imgUrl, index) in imgsUrl" :key="index">
          <div
            :style="{
              width: imageWidths[index] + 'px',
              height: imageHeight + 'px',
            }"
            class="checkboxAndImg"
            @mouseover="mouseOver(index)"
            @mouseleave="mouseLeave"
          >
            <el-checkbox
              class="checkbox"
              :label="imgsId[index]"
              @change="pinSelect(index)"
              v-show="showCheckBox == index || checkedImgs.length > 0"
            >
              <br />
            </el-checkbox>
            <el-image
              :style="{
                width: imageWidths[index] + 'px',
                height: imageHeight + 'px',
              }"
              lazy
              class="image"
              fit="contain"
              :src="imgUrl"
              :preview-src-list="imgsUrl"
            ></el-image>
            <div class="shadow" v-show="showCheckBox == index"></div>
          </div>
        </div>
      </div>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    imgsUrl: {
      required: true,
      type: Array,
    },
    imgsId: {
      required: true,
      type: Array,
    },
  }, //分类信息元组
  name: "",
  data() {
    return {
      imageWidths: [],
      imageHeight: 200,
      checkedImgs: [], //被选择的图像id
      checkAll: false,
      isIndeterminate: true,
      showCheckBox: -1,
      isPin: false,
      lastChecked: -1,
    };
  },
  watch: {
    imgsUrl: {
      handler(newVal) {
        this.imageWidths = [];
        this.justify(newVal);
      },
      deep: true,
    },
  },
  mounted: function () {
    window.addEventListener("keydown", (code) => {
      // 这个是获取键盘按住事件
      if (code.key == "Shift") this.isPin = true;
    });
    window.addEventListener("keyup", (code) => {
      // 这个是获取键盘松开事件
      if (code.key == "Shift") this.isPin = false;
    });
  },
  beforeMount: function () {
    let self = this;
    setTimeout(function () {
      self.justify(self.imgsUrl);
    }, 200);
  },

  methods: {
    pinSelect(index) {
      let checked = this.checkedImgs.indexOf(this.imgsId[index]) != -1;
      if (checked && this.isPin) {
        //console.log("已经按住shift并且选中", index);
        //将lastChecked和index之间全部加入checkedImgs
        let beg = Math.min(this.lastChecked, index);
        let end = Math.max(this.lastChecked, index);
        for (let cur = beg + 1; cur < end; cur++) {
          if (this.checkedImgs.indexOf(this.imgsId[cur]) == -1) {
            this.checkedImgs.push(this.imgsId[cur]);
          }
        }
        this.lastChecked = index;
      } else if (checked && !this.isPin) {
        //console.log("选中但未按住shift", index);
        this.lastChecked = index;
      } else {
        // console.log("取消选中", index);
      }
    },
    mouseOver(index) {
      this.showCheckBox = index;
    },
    mouseLeave() {
      this.showCheckBox = -1;
    },
    justifyImgWidth(imgUrl) {
      let img = new Image();
      img.src = imgUrl;
      let self = this;
      setTimeout(function () {
        self.imageWidths.push(
          parseInt((self.imageHeight / img.naturalHeight) * img.naturalWidth)
        );
      }, 100);
    },
    justify(imgArr) {
      this.imageWidths = [];
      for (let img of imgArr) {
        this.justifyImgWidth(img);
      }
    },
    //现代浏览器
    handleCheckAllChange(val) {
      this.checkedImgs = val ? this.imgsId : [];
      this.isIndeterminate = false;
      this.$store.commit("photo/storeCheckedImgsInAlbum", this.checkedImgs);
    },
    handleCheckedImgsChange() {
      let checkedCount = this.checkedImgs.length;
      this.checkAll = checkedCount >= this.imgsUrl.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.imgsUrl.length;
      this.$store.commit("photo/storeCheckedImgsInAlbum", this.checkedImgs);
    },
  },
};
</script>

<style lang="scss" scoped>
.type-imgs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: whitesmoke;
}
.images {
  margin: 2px 2px;
}
.checkboxAndImg {
  position: relative;
}
.checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
}

.image {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  padding: 0px 0px;
}
.shadow {
  width: 100%;
  height: 21px;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: radial-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.03) 100%
    ),
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(143, 152, 157, 0.2) 100%
    );
  background-blend-mode: normal, multiply;
  position: absolute;
}

/deep/ .el-checkbox__inner {
  width: 20px !important;
  height: 20px !important;
}
/deep/ .el-checkbox__inner::after {
  height: 10px !important;
  left: 7px !important;
}
</style>
